import { useState, useEffect } from 'react'
import { View, ScrollView } from '@tarojs/components'
import {
  IHeaderBox,
  IPieTypeCharts,
  IBarGroupCharts
} from '@/components/index'
import { schoolDetail, CirChartStat } from '@/axios/exam'

import './index.scss'

interface AOVIndexProps {
  // onRef: any;
  // gradeData?: API.GradeItem[];
}

const AOVIndex: React.FC<AOVIndexProps> = () => {
  const [cirChartData, setCirChartData] = useState<API.ChartStatItem[]>([])
  const [barChartData, setBarChartData] = useState<API.ChartStatItem[]>([])

  const [triggered, setTriggered] = useState<boolean>(false)

  const getChartData = async () => {
    try {
      const results = await CirChartStat()
      setCirChartData(results || [])

      const barResults = await schoolDetail()
      const barData: any[] = []
      barResults.map(item => {
        barData.push({
          name: '未完成',
          label: item.className,
          value: item.undoNum
        })
        barData.push({
          name: '已完成',
          label: item.className,
          value: item.finishNum
        })
      })

      setBarChartData(barData || [])
      setTriggered(false)
    } catch {}
  }

  const onRefresh = () => {
    getChartData()
    setTriggered(true)
  }

  useEffect(() => {
    getChartData()
  }, [])

  // useImperativeHandle(props.onRef, () => ({
  //   init,
  // }));

  return (
    <ScrollView
      scrollY
      className='scrollview'
      onRefresherRefresh={onRefresh}
      enableBackToTop
      refresherEnabled
      refresherTriggered={triggered}
      scrollWithAnimation
    >
      <View className='common_page'>
        <View className='card_box chart_box'>
          <IHeaderBox title='测评概览' />
          <IPieTypeCharts
            data={cirChartData}
            fieldNames={{ label: 'name', value: 'totalNum' }}
          />
        </View>
        <View className='card_box data_box'>
          <IHeaderBox title='数据详情' />
          <IBarGroupCharts
            data={barChartData}
            fieldNames={{ label: 'label', value: 'value' }}
          />
        </View>
      </View>
    </ScrollView>
  )
}

export default AOVIndex
